<template>
    <div class="EchartPractice">
        <div ref="main" id="main"></div>
    </div>
</template>

<script>
import * as echarts from "echarts";
export default {

    name: "EchartPractice",
    methods: {
        drawChart() {
            // 数据准备: [{ name: "淘宝", value: 11231 },
            // { name: "京东", value: 22673 },
            // { name: "唯品会", value: 6123 },
            // { name: "1号店", value: 8989 },
            // { name: "聚美优品", value: 6700 }]
            // 图表类型∶
            // 在series下设置type: pie

            let myEchart = echarts.init(this.$refs.main);
            let pieData = [{
                name: "淘宝", value: 11231,
                itemStyle: {// 控制淘宝这一区域的样式
                    color: "yellow"
                },
                label: {// 设置文字的样式
                    color: 'green'
                },
                emphasis: {// 设置高亮样式
                    itemStyle: {// 控制淘宝这一区域的高亮样式
                        color: "pink"
                    },
                    label: {// 设置文字的高亮样式
                        color: 'black'
                    },
                }
            },
            { name: "京东", value: 22673 },
            { name: "唯品会", value: 6123 },
            { name: "1号店", value: 8989 },
            { name: "聚美优品", value: 6700 }]
            var option = {
                title: {// 设置标题样式
                    text: '饼图的样式',
                    textStyle: {// 设置字体样式
                        color: 'blue'
                    }
                },
                series: [
                    {
                        name: '购物',
                        type: 'pie',
                        data: pieData,
                        label: {// 饼图文字显示
                            show: true,// 显示文字
                            formatter: function (arg) {// 决定文字显示的内容
                                return arg.name + '花费了' + arg.value + '元\n' + '占比' + arg.percent + '%'
                            },
                        },
                    }
                ]
            }
            myEchart.setOption(option);
        }
    },
    mounted() {
        this.drawChart();
    }
}
</script>

<style scoped>
#main {
    width: 600px;
    height: 400px;
    margin: auto;
    margin-top: 100px
}
</style>

